<template>
  <el-form v-if="ruleForm" label="测试点配置">
    <el-form-item label="导入测试点:">
      <div class="row">
        <div class="col">
          <el-upload
            action="/"
            :show-file-list="false"
            accept=".zip"
            :http-request="request"
            class="d-inline-block"
          >
            <el-button class="icon-button" type="primary">
              <svg class="icon icon-right" aria-hidden="true">
                <use xlink:href="#icon-icon_tianjiatimu_upload" />
              </svg>
              <span>上传测试点</span>
            </el-button> </el-upload
          >&nbsp;
          <el-tooltip
            class="item cu"
            effect="dark"
            content="请上传zip的压缩文件，点击问号下载zip示例"
            placement="top"
          >
            <el-icon :style="{ fintSize: '24px' }" @click="() => downloadtip()">
              <question-filled />
            </el-icon> </el-tooltip
          >&nbsp; &nbsp; &nbsp;
        </div>
      </div>
    </el-form-item>

    <el-form-item label="限制:">
      <div class="row">
        <div class="col">
          <el-input
            size="default"
            class="width300"
            v-model.number="ruleForm.memorylimit"
          >
            <template #prefix>
              <svg
                :style="{ lineHeight: '36px', color: '#000' }"
                class="icon m-mr-2"
                aria-hidden="true"
              >
                <use xlink:href="#icon-lujing525" />
              </svg>
              <span>内存限制</span>
            </template>
            <template #suffix>
              <span :style="{ lineHeight: '36px' }">MB</span>
            </template>
          </el-input>
        </div>
        <div class="col">
          <el-input
            size="default"
            class="width300"
            v-model.number="ruleForm.timelimit"
            @change="
              (c) =>
                Number(c) > 200000
                  ? (ruleForm.timelimit = 200000)
                  : (ruleForm.timelimit = Number(c))
            "
          >
            <template #prefix>
              <svg
                :style="{ lineHeight: '36px', color: '#000' }"
                class="icon m-mr-2"
                aria-hidden="true"
              >
                <use xlink:href="#icon-jianqu1" />
              </svg>
              <span>时间限制</span>
            </template>
            <template #suffix>
              <span :style="{ lineHeight: '36px' }">ms</span>
            </template>
          </el-input>
        </div>
      </div>
    </el-form-item>
    <el-form-item label="记分方式:">
      <el-radio-group v-model="ruleForm.scorecalculation">
        <el-radio label="add">加和</el-radio>
        <el-radio label="min">最小值（仅对subtask有效）</el-radio>
      </el-radio-group>
    </el-form-item>
    <div class="tablediv">
      <div class="text-right">
        <el-button
          v-show="!ruleForm1?.length"
          size="default"
          @click="addexample(true, 0)"
          >添加测试点</el-button
        >

        <el-button
          size="default"
          class="bg-dark"
          @click="() => settestcasesscore()"
          >平均分配分值</el-button
        >

        <el-button
          class="icon-button"
          size="default"
          @click="() => download()"
          type="primary"
        >
          <svg class="icon icon-right" aria-hidden="true">
            <use xlink:href="#icon-icon_tianjiatimu_download" />
          </svg>
          <span>下载当前测试点</span>
        </el-button>
      </div>
      <table class="table">
        <thead>
          <tr :style="{ fontSize: '14px' }">
            <th scope="col" width="50">编号</th>
            <th scope="col">测试点输入</th>
            <th scope="col">测试点输出</th>
            <th scope="col" width="100">分值</th>
            <th scope="col" width="100">subtask</th>
            <th scope="col" width="100">添加/删除</th>
          </tr>
        </thead>
        <draggable
          v-model="ruleForm1"
          group="people"
          @start="drag = true"
          @end="drag = true"
          item-key="inputz"
          v-show="ruleForm?.type == '代码'"
          tag="tbody"
          class="text-center draggable"
        >
          <template #item="{ element, index }">
            <tr class="dicentertr">
              <td class="dicenter">#{{ index + 1 }}</td>
              <td class="dicenter">
                <el-input
                  :rows="3"
                  v-if="element.type !== 'url'"
                  type="textarea"
                  :autosize="{ minRows: 3 }"
                  v-model="element.input"
                  class="testtextarea"
                ></el-input>
                <span v-else>{{ getname(element.input) }}</span>
              </td>
              <td class="dicenter">
                <el-input
                  :rows="3"
                  v-if="element.type !== 'url'"
                  type="textarea"
                  class="testtextarea"
                  :autosize="{ minRows: 3 }"
                  v-model="element.output"
                ></el-input>
                <span v-else>{{ getname(element.output) }}</span>
              </td>
              <td class="dicenter">
                <el-input placeholder="请输入" v-model.number="element.score">
                  <template #suffix>
                    <span :style="{ lineHeight: '32px' }">%</span>
                  </template>
                </el-input>
              </td>
              <td class="dicenter">
                <el-select v-model.number="element.groupA">
                  <el-option
                    placeholder="请选择"
                    v-for="v in 10"
                    :key="v"
                    :label="v"
                    :value="v"
                  ></el-option>
                </el-select>
              </td>
              <td>
                <el-icon size="18px" class="icon-add1 cu">
                  <plus @click="addexample(true, index)" />
                </el-icon>
                <br />
                <el-icon
                  size="18px"
                  class="icon-add2 cu"
                  @click="addexample(false, index)"
                >
                  <semi-select />
                </el-icon>
              </td>
            </tr>
          </template>
        </draggable>
      </table>
    </div>

    <br />
  </el-form>
</template>

<script setup lang="ts">
import { Plus, QuestionFilled, SemiSelect } from "@element-plus/icons-vue";
import { UploadRequestHandler } from "element-plus";
import { assign } from "lodash-es";
import { computed, ref } from "vue";
import draggable from "vuedraggable";
import Studycodemodel from "../../mysql_interface/studycodemodel";
type P = {
  disabled?: boolean;
  ruleForm: Studycodemodel.Iquestion | Studycodemodel.Imatchquestion;
  download: Function;
  addexample: Function;
  getname: Function;
  request: UploadRequestHandler;
  downloadtip: Function;
  settestcasesscore: Function;
};

const p = defineProps<P>();

const u = defineEmits(["update:ruleForm"]);

const drag = ref(false);

const ruleForm1 = computed<Studycodemodel.Itestcases[]>({
  get() {
    if (!p.ruleForm) {
      return [];
    }
    if ("testcases" in p.ruleForm) {
      return p.ruleForm.testcases || [];
    }
    return [];
  },
  set(v) {
    if ("testcases" in p.ruleForm) {
      u(
        "update:ruleForm",
        assign({}, p.ruleForm, {
          testcases: v,
        })
      );
    }
  },
});
</script>

<style scoped>
.icon-right {
  color: #fff;
  margin-right: 8px;
}

.icon {
  color: #fff;
}

.icon-button {
  padding-left: 24px;
  padding-right: 24px;
  font-size: 14px;
}

.bg-dark {
  color: #fff;
}

.draggable {
  border-top-width: 0px !important;
}

.draggable td {
  border-width: 0px !important;
  background-color: #f5f5f5;
}

.icon-add1 {
  height: 24px;
  width: 24px;
  background-color: var(--color-cheng);
  color: #fff;
  margin-bottom: 12px;
  border-radius: 2px;
  line-height: 22px;
}

.icon-add2 {
  height: 24px;
  width: 24px;
  background-color: #d9d9d9;
  color: #fff;
  border-radius: 2px;
  line-height: 22px;
}

.dicenter {
  line-height: 74px;
  font-weight: bold;
}

.testtextarea {
  height: 74px;
  overflow-y: auto;
}

.dicentertr {
  padding-top: 12px;
  height: 96px;
  border-radius: 4px;
  overflow: hidden;
  border-top: 12px solid #fff;
}

.icon-close {
  font-size: 24px;
  cursor: pointer;
}

.width300 {
  border-radius: 8px 0px 0px 8px;
  height: 36px;
  --el-bg-color: var(--color-1f);
  --el-input-icon-color: #000;
}

.tablediv {
  border: 1px solid var(--color-d9);
  padding: 24px;
  box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1),
    0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
  border-radius: 4px;
}
</style>

<style>
.width300 .el-input-group__append {
  padding: 0 3px;
}

.width300 .el-input__inner {
  height: 36px;
  line-height: 36px;
  padding-left: 80px !important;
}

.width300 .el-input__prefix {
  line-height: 36px;
}

.width300 .el-input__prefix-inner {
  height: 36px;
  display: inline-block;
}
</style>
